<!--今日排废量-->
<template>
    <div style="height: 100%">
        <CommonTitleComponent :text="`${useDemoInject().value}排废量`">
            <p class="titles">
                <span>总1.84亿 m³</span>
            </p>
        </CommonTitleComponent>

        <div class="emiss">
            <chart-view
                :chart-option="EchartsMethods.tadayBar({ chartViewStatus })"
                :auto-resize="true"
                height="100%"
                style="height: 100%"
            ></chart-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import { inject, watch } from 'vue';
import type { Ref } from 'vue';
import { EchartsMethods } from '@/chart/index';
import useContext from '@/utils/useContext';
/** 图表展示状态
 *
 *  chartViewStatus：如果为Statistics 自定义图表的grid布局
 *
 */
interface Props {
    chartViewStatus?: string;
}
const props = withDefaults(defineProps<Props>(), {
    chartViewStatus: ''
});

// 父组件注Provide  — 日期切换
const { useInject: useDemoInject } = useContext<Ref<string>>('changeDate');
const str = useDemoInject();
console.log(useDemoInject, 'str');
// 监听日期切换
watch(
    () => str.value,
    val => {
        console.log('切换日期：', val);
    }
);
</script>

<style scoped lang="scss">
.titles {
    color: #fff;
    text-align: center;
    span {
        font-size: 15px;
        font-weight: bold;
        background: linear-gradient(182deg, #41f6ff 0%, #07bfff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.emiss {
    height: calc(100% - 25px);
    margin-top: 12px;
}
</style>
